<template>
    <div class="first-amnimation">
        <div class="center-logo" @touchstart="handleClickLogo" >
            <img src="http://qiaoxinholdings.com/img/%E4%BE%A8%E4%BF%A1%E9%87%91%E8%89%B2LOGO.png" alt="">
            <p>请点击</p>
        </div>
        <div class="logo-gif" v-if="!showGifFlag">
            <img src="http://qiaoxinholdings.com/img/logoGIF_white-once.gif" alt="">
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                showGifFlag: true
            }
        },
        components: {

        },
        mounted() {
        },
        methods: {
            handleClickLogo() {
                this.showGifFlag = false
                setTimeout( () => {
                    this.$emit("handleClickLogo", false)
                }, 5500)
            }
        }
    };
</script>
<style lang="less">
    @-webkit-keyframes firstLogo {
        0% {
            transform: translateY(0px)
        }
        50% {
            transform: translateY(-13px)
        }
        100% {
            transform: translateY(0px)
        }
    }
    @keyframes firstLogo {
        0% {
            transform: translateY(0px)
        }
        50% {
            transform: translateY(-13px)
        }
        100% {
            transform: translateY(0px)
        }
    }
    .first-amnimation {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 2;
        .center-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            img {
                width: 130px;
                vertical-align: middle;
                -webkit-animation: firstLogo 1.5s infinite;
                animation: firstLogo 1.5s infinite;
            }
            p {
                text-align: center;
            }
        }
        .logo-gif {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
